/**
 * Created by jean.h.ma on 01/04/2018.
 */

import React, {PureComponent} from 'react'
import Master from '../../components/Master'
import Base from '@codefree/badger/app/components/Base'
import HelloWorld from '../../components/HelloWorld'
import axios from 'axios'
import {DataTable, DataTableWithPagination} from 'react-component-data-table'

export default class Hello extends Base {
	constructor(props) {
		super(props);
		this.state = {
			key: null,
			value: null,
			dataSource: [],
			total: 0,
			pageIndex: 0,
			pageSize: 2
		};
		this.dataTableInstance = null;
		this.columnDefine = [{
			name: "Key",
			render: rowData => rowData['key']
		}, {
			name: "Value",
			render: rowData => rowData['value']
		}, {
			name: "操作",
			render: rowData => {
				return (
					<a href="javascript:void(0)" onClick={() => {
						if (confirm('是否要删除?')) {
							this.delete(rowData['id']);
						}
					}}>delete</a>
				);
			}
		}];
	}

	async delete(id) {
		const {data} = await axios.get(`http://127.0.0.1:3000/dict/${id}/delete`);
		if (data.code === 0) {
			alert("删除成功");
			this.dataTableInstance.refresh();
		}
		else {
			alert(data.message)
		}
	}

	async create() {
		const {data} = await axios.post(`http://127.0.0.1:3000/dict`, {
			key: this.state.key,
			value: this.state.value,
		});
		if (data.code === 0) {
			alert("添加成功");
			this.dataTableInstance.refresh();
		}
		else {
			alert(data.message);
		}
	}

	async query(filter) {
		const {data} = await axios.post(`http://127.0.0.1:3000/dict/query`, filter);
		if (data.code === 0) {
			this.updateState({
				dataSource: {$set: data.data.list},
				total: {$set: data.data.total},
			});
		}
		else {
			alert(data.message);
		}
	}

	render() {
		return (
			<Master>
				<p>hello</p>
				<HelloWorld text={"abc"}/>
				<div>
					<form className="pure-form pure-form-stacked">
						<fieldset>
							<legend>Dictionary</legend>

							<label>Key</label>
							<input type="email" placeholder="Email" onChange={event => {
								this.updateState({
									key: {$set: event.target.value}
								})
							}}/>

							<label>Value</label>
							<input id="password" type="text" placeholder="Password"
								   onChange={({target: {value}}) => {
									   this.updateState({
										   value: {$set: value}
									   })
								   }}/>

							<button type="button"
									onClick={this.create.bind(this)}
									className="pure-button pure-button-primary">ADD
							</button>
						</fieldset>
					</form>
				</div>
				<div>{JSON.stringify(this.state)}</div>
				<DataTableWithPagination columns={this.columnDefine}
										 ref={ref => this.dataTableInstance = ref}
										 pageIndex={this.state.pageIndex}
										 pageSize={this.state.pageSize}
										 total={this.state.total}
										 onPageChange={filter => {
											 console.log(filter);
											 this.query({
												 pageIndex: filter.pageIndex,
												 pageSize: filter.pageSize
											 });
										 }}
										 renderNextPage={()=>{
											 return <span>下一页</span>;
										 }}
										 renderPrevPage={()=>{
											 return <span>上一页</span>;
										 }}
										 dataTableClassName="pure-table"
										 paginationClassName="pagination"
										 dataSource={this.state.dataSource}/>
			</Master>
		);
	}

	//componentWillUnmount
	componentDidMount() {
		super.componentDidMount();
		this.query({
			pageIndex: this.state.pageIndex,
			pageSize: this.state.pageSize
		});
	}
}